<template>
  <view class="user-stats-page">
    <!-- 乡村风格背景 -->
    <view class="village-bg"></view>
    
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <!-- <view class="nav-back" @click="goBack">
        <uni-icons type="arrowleft" size="24" color="#fff"></uni-icons>
      </view> -->
      <text class="nav-title">我的代取统计</text>
    </view>
    
    <!-- 统计卡片区 -->
    <scroll-view class="stats-container" scroll-y>
      <!-- 用户头像和基本信息 -->
      <view class="user-profile">
        <image class="user-avatar" :src="userInfo.avatar"></image>
        <view class="user-info">
          <text class="user-name">{{userInfo.name}}</text>
          <text class="user-level">VIP{{userInfo.level}}会员</text>
        </view>
      </view>
      
      <!-- 数据概览 -->
      <view class="stats-overview">
        <view class="overview-card">
          <text class="overview-label">本月代取</text>
          <text class="overview-value">{{currentMonthPickups}}次</text>
          <text class="overview-change" :class="{'up': pickupChange >= 0, 'down': pickupChange < 0}">
            <uni-icons :type="pickupChange >= 0 ? 'arrow-up' : 'arrow-down'" size="20" 
              :color="pickupChange >= 0 ? '#4CAF50' : '#F44336'"></uni-icons>
            {{Math.abs(pickupChange)}}%
          </text>
        </view>
        
        <view class="overview-card">
          <text class="overview-label">累计节省</text>
          <text class="overview-value">¥{{totalSavings}}</text>
          <text class="overview-tip">(相比自取)</text>
        </view>
        
        <view class="overview-card">
          <text class="overview-label">我的评分</text>
          <view class="rating-stars">
            <uni-icons v-for="i in 5" :key="i" type="star-filled" size="24" 
              :color="i <= userInfo.rating ? '#FFC107' : '#E0E0E0'"></uni-icons>
          </view>
          <text class="rating-text">{{userInfo.rating}}分</text>
        </view>
      </view>
      
      <!-- 月度取件趋势 -->
      <view class="stats-card">
        <view class="card-header">
          <text class="card-title">我的取件趋势</text>
          <view class="card-tabs">
            <text class="tab-item" :class="{active: chartType === 'month'}" @click="changeChartType('month')">月</text>
            <text class="tab-item" :class="{active: chartType === 'year'}" @click="changeChartType('year')">年</text>
          </view>
        </view>
        <view class="chart-container">
          <qiun-data-charts type="line" :chartData="pickupTrendData" :opts="chartOpts" />
        </view>
      </view>
      
      <!-- 取件费用统计 -->
      <view class="stats-card">
        <view class="card-header">
          <text class="card-title">费用统计</text>
          <view class="card-filter" @click="showTimeFilter">
            <text>{{timeFilterText}}</text>
            <uni-icons type="arrowdown" size="20" color="#666"></uni-icons>
          </view>
        </view>
        <view class="fee-stats">
          <view class="fee-item">
            <text class="fee-label">代取费用</text>
            <text class="fee-value">¥{{feeStats.pickupFee}}</text>
          </view>
          <view class="fee-item">
            <text class="fee-label">加急服务</text>
            <text class="fee-value">¥{{feeStats.urgentFee}}</text>
          </view>
          <view class="fee-item">
            <text class="fee-label">优惠减免</text>
            <text class="fee-value">-¥{{feeStats.discount}}</text>
          </view>
          <view class="fee-item total">
            <text class="fee-label">总支出</text>
            <text class="fee-value">¥{{feeStats.total}}</text>
          </view>
        </view>
      </view>
      
      <!-- 常用取件点 -->
      <view class="stats-card">
        <view class="card-header">
          <text class="card-title">常用取件点</text>
        </view>
        <view class="location-list">
          <view class="location-item" v-for="(item, index) in frequentLocations" :key="index">
            <view class="location-info">
              <text class="location-name">{{item.name}}</text>
              <text class="location-count">{{item.count}}次</text>
            </view>
            <view class="location-bar">
              <view class="bar-fill" :style="{width: (item.count / frequentLocations[0].count * 100) + '%', backgroundColor: getLocationColor(index)}"></view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 最近取件记录 -->
      <view class="stats-card">
        <view class="card-header">
          <text class="card-title">最近取件记录</text>
          <text class="card-more" @click="viewAllRecords">查看全部</text>
        </view>
        <view class="pickup-records">
          <view class="record-item" v-for="(item, index) in recentPickups" :key="index">
            <view class="record-icon">
              <uni-icons type="box" size="28" color="#4a90e2"></uni-icons>
            </view>
            <view class="record-info">
              <text class="record-title">{{item.title}}</text>
              <text class="record-time">{{item.time}}</text>
            </view>
            <text class="record-fee">¥{{item.fee}}</text>
          </view>
        </view>
      </view>
      
      <!-- 省钱攻略 -->
      <view class="stats-card tips-card">
        <view class="card-header">
          <text class="card-title">省钱小贴士</text>
        </view>
        <view class="tips-list">
          <view class="tip-item">
            <uni-icons type="lightbulb" size="24" color="#FFC107"></uni-icons>
            <text class="tip-text">夜间(20:00-22:00)取件可享8折优惠</text>
          </view>
          <view class="tip-item">
            <uni-icons type="lightbulb" size="24" color="#FFC107"></uni-icons>
            <text class="tip-text">邀请好友使用可获得¥5优惠券</text>
          </view>
          <view class="tip-item">
            <uni-icons type="lightbulb" size="24" color="#FFC107"></uni-icons>
            <text class="tip-text">累计10单可升级VIP会员享更多优惠</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 用户信息
      userInfo: {
        name: '乡村用户',
        avatar: '/static/default-avatar.png',
        level: 1,
        rating: 4.5
      },
      
      // 当前月份数据
      currentMonthPickups: 8,
      pickupChange: 15.6,
      totalSavings: '120.50',
      
      // 图表类型
      chartType: 'month',
      
      // 取件趋势数据
      pickupTrendData: {
        categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        series: [
          {
            name: '取件次数',
            data: [5, 6, 7, 8, 6, 5, 7, 8, 9, 10, 8, 9]
          }
        ]
      },
      
      // 图表配置
      chartOpts: {
        color: ['#4a90e2'],
        padding: [15, 15, 0, 15],
        enableScroll: false,
        legend: {
          show: false
        },
        xAxis: {
          disableGrid: true,
          axisLineColor: '#CCCCCC'
        },
        yAxis: {
          gridColor: '#EEEEEE',
          splitNumber: 5
        },
        extra: {
          line: {
            type: 'curve',
            width: 3,
            activeType: 'none'
          }
        }
      },
      
      // 费用统计
      feeStats: {
        pickupFee: '64.00',
        urgentFee: '16.00',
        discount: '12.50',
        total: '67.50'
      },
      timeFilter: 'month',
      timeFilterText: '本月',
      
      // 常用取件点
      frequentLocations: [
        {name: '快乐星汉堡店', count: 12},
        {name: '福旺超市', count: 8},
        {name: '王打挂小学兔喜超市', count: 5},
        {name: '村口小卖部', count: 3}
      ],
      
      // 最近取件记录
      recentPickups: [
        {
          title: '快递代取服务',
          time: '04-25 14:30',
          fee: '8.00'
        },
        {
          title: '加急快递代取',
          time: '04-24 09:15',
          fee: '12.00'
        },
        {
          title: '快递代取服务',
          time: '04-23 16:45',
          fee: '8.00'
        },
        {
          title: '大件物品代取',
          time: '04-22 11:20',
          fee: '15.00'
        }
      ]
    }
  },
  methods: {
    // 改变图表类型
    changeChartType(type) {
      this.chartType = type;
      // 这里应该根据类型从API获取数据
      if (type === 'year') {
        this.pickupTrendData = {
          categories: ['2018', '2019', '2020', '2021', '2022', '2023'],
          series: [
            {
              name: '取件次数',
              data: [24, 36, 48, 60, 72, 84]
            }
          ]
        };
      } else {
        this.pickupTrendData = {
          categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          series: [
            {
              name: '取件次数',
              data: [5, 6, 7, 8, 6, 5, 7, 8, 9, 10, 8, 9]
            }
          ]
        };
      }
    },
    
    // 显示时间筛选
    showTimeFilter() {
      uni.showActionSheet({
        itemList: ['本周', '本月', '本季', '本年'],
        success: (res) => {
          this.timeFilter = ['week', 'month', 'quarter', 'year'][res.tapIndex];
          this.timeFilterText = ['本周', '本月', '本季', '本年'][res.tapIndex];
          // 这里应该根据筛选条件从API获取数据
        }
      });
    },
    
    // 获取地点颜色
    getLocationColor(index) {
      const colors = ['#4a90e2', '#4CAF50', '#FF9800', '#9C27B0'];
      return colors[index % colors.length];
    },
    
    // 查看全部记录
    viewAllRecords() {
      uni.navigateTo({
        url: '/pages/pickupRecords/pickupRecords'
      });
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack();
    }
  }
}
</script>

<style lang="scss" scoped>
.user-stats-page {
  position: relative;
  min-height: 100vh;
  background-color: #f8f9fa;
  overflow: hidden;
}

/* 乡村风格背景 */
.village-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(135deg, rgba(139, 195, 74, 0.1) 0%, transparent 50%),
    linear-gradient(45deg, rgba(255, 193, 7, 0.1) 0%, transparent 50%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M20,50 Q50,20 80,50" stroke="rgba(139, 195, 74, 0.1)" stroke-width="2" fill="none"/></svg>');
  background-size: cover;
  z-index: 0;
}

/* 顶部导航 */
.nav-bar {
  display: flex;
  align-items: center;
  padding: 30rpx;
  position: relative;
  z-index: 1;
  
  .nav-back {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(74, 144, 226, 0.8);
    backdrop-filter: blur(10rpx);
    transition: all 0.3s;
    
    &:active {
      background: rgba(74, 144, 226, 1);
    }
  }
  
  .nav-title {
    flex: 1;
    text-align: center;
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

/* 用户信息 */
.user-profile {
  display: flex;
  align-items: center;
  padding: 30rpx;
  margin-bottom: 20rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20rpx;
  box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.05);
  border: 1rpx solid rgba(255, 255, 255, 0.3);
  
  .user-avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    border: 4rpx solid rgba(74, 144, 226, 0.3);
    margin-right: 30rpx;
  }
  
  .user-info {
    flex: 1;
    
    .user-name {
      display: block;
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .user-level {
      display: inline-block;
      font-size: 26rpx;
      color: #FF9800;
      background: rgba(255, 152, 0, 0.1);
      padding: 5rpx 15rpx;
      border-radius: 20rpx;
    }
  }
}

/* 统计容器 */
.stats-container {
  height: calc(100vh - 120rpx);
  padding: 20rpx;
}

/* 数据概览 */
.stats-overview {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
  
  .overview-card {
    flex: 1;
    padding: 30rpx;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20rpx;
    box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.05);
    border: 1rpx solid rgba(255, 255, 255, 0.3);
    margin: 0 10rpx;
    
    .overview-label {
      display: block;
      font-size: 26rpx;
      color: #666;
      margin-bottom: 15rpx;
    }
    
    .overview-value {
      display: block;
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .overview-tip {
      display: block;
      font-size: 22rpx;
      color: #999;
    }
    
    .overview-change {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      
      &.up {
        color: #4CAF50;
      }
      
      &.down {
        color: #F44336;
      }
      
      uni-icons {
        margin-right: 5rpx;
      }
    }
    
    .rating-stars {
      display: flex;
      margin-bottom: 10rpx;
      
      uni-icons {
        margin-right: 5rpx;
      }
    }
    
    .rating-text {
      font-size: 24rpx;
      color: #FF9800;
    }
  }
}

/* 统计卡片 */
.stats-card {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.05);
  border: 1rpx solid rgba(255, 255, 255, 0.3);
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .card-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .card-tabs {
      display: flex;
      background: rgba(74, 144, 226, 0.1);
      border-radius: 20rpx;
      padding: 5rpx;
      
      .tab-item {
        padding: 5rpx 15rpx;
        font-size: 24rpx;
        color: #666;
        border-radius: 16rpx;
        
        &.active {
          background: #4a90e2;
          color: #fff;
        }
      }
    }
    
    .card-filter {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #666;
      padding: 5rpx 15rpx;
      background: rgba(74, 144, 226, 0.1);
      border-radius: 20rpx;
      
      uni-icons {
        margin-left: 5rpx;
      }
    }
    
    .card-more {
      font-size: 24rpx;
      color: #4a90e2;
    }
  }
  
  .chart-container {
    width: 100%;
    height: 300rpx;
  }
  
  .fee-stats {
    .fee-item {
      display: flex;
      justify-content: space-between;
      padding: 20rpx 0;
      border-bottom: 1rpx dashed #eee;
      
      &:last-child {
        border-bottom: none;
      }
      
      &.total {
        .fee-label {
          font-weight: bold;
          color: #333;
        }
        
        .fee-value {
          font-weight: bold;
          color: #F44336;
        }
      }
      
      .fee-label {
        font-size: 28rpx;
        color: #666;
      }
      
      .fee-value {
        font-size: 28rpx;
        color: #333;
      }
    }
  }
  
  .location-list {
    .location-item {
      margin-bottom: 20rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .location-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10rpx;
        
        .location-name {
          font-size: 28rpx;
          color: #333;
        }
        
        .location-count {
          font-size: 26rpx;
          color: #666;
        }
      }
      
      .location-bar {
        height: 10rpx;
        background: #f5f5f5;
        border-radius: 5rpx;
        overflow: hidden;
        
        .bar-fill {
          height: 100%;
          transition: all 0.5s ease;
        }
      }
    }
  }
  
  .pickup-records {
    .record-item {
      display: flex;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #f5f5f5;
      
      &:last-child {
        border-bottom: none;
      }
      
      .record-icon {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        background: rgba(74, 144, 226, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20rpx;
      }
      
      .record-info {
        flex: 1;
        
        .record-title {
          display: block;
          font-size: 28rpx;
          color: #333;
          margin-bottom: 5rpx;
        }
        
        .record-time {
          display: block;
          font-size: 24rpx;
          color: #999;
        }
      }
      
      .record-fee {
        font-size: 28rpx;
        color: #F44336;
        font-weight: bold;
      }
    }
  }
  
  &.tips-card {
    background: rgba(255, 248, 225, 0.9);
    border-color: rgba(255, 235, 59, 0.3);
    
    .tips-list {
      .tip-item {
        display: flex;
        align-items: center;
        padding: 20rpx 0;
        border-bottom: 1rpx dashed rgba(255, 235, 59, 0.5);
        
        &:last-child {
          border-bottom: none;
        }
        
        uni-icons {
          margin-right: 15rpx;
        }
        
        .tip-text {
          flex: 1;
          font-size: 26rpx;
          color: #666;
        }
      }
    }
  }
}
</style>